/* 引入less */
/* 重置样式 */
require('../css/commCss/normalize.css')
/* 重置样式补充 */
require('../css/commCss/reset.css')
/* 公共样式 */
require('../css/commCss/property.css')
/* 公共属性 */
require('../css/commCss/basic.less')
/* 字体图标 */
require('../fonts/iconfont.css')
/* 当前页面 */
require('../css/personalData.less')

/* 引入weui */
require('weui');
const weui = require('weui.js');

/* 引入axios */
const axios = require('axios');



document.addEventListener('DOMContentLoaded', function () {

    /* 点击顶部返回按钮退回上一个页面 */
    document.querySelector('#headerBack').addEventListener('click', function () {
        history.go(-1)
    })

    /* 上传头像 */
    document.querySelector('#imgBtn').addEventListener('change', function () {
        //alert(11)
        //console.log(this.files[0]);
        let file = this.files[0]

        /* 定义formData对象 */
        let formData = new FormData();
        formData.append('imgurl', file)

        //向服务器发请求上传图片
        axios.post('http://139.9.177.51:8099/users/upload', formData).then(function (res) {
            //console.log(res);
            if (res.data.status === 1) { //失败
                weui.alert('头像格式错误')
            } else { //成功
                document.querySelector('#headerImg').src = 'http://139.9.177.51:8099' + res.data.data
            }
        })
    })

    /* 美化图片上传框 */
    document.querySelector('#headerImg').addEventListener('click', function () {
        document.querySelector('#imgBtn').click()
    })


    /* 性别 */
    document.querySelector('#sexPicker').addEventListener('click', function () {
        weui.picker([{
            label: '男',
            value: 0
        }, {
            label: '女',
            value: 1
        }], {
            onConfirm: function (result) {
                //console.log(result[0].label);
                document.querySelector('#sex').textContent = result[0].label
            },
            title: '请选择性别'
        });
    });

    /* 补零函数 */
    function fillZero(n) {
        return n < 10 ? '0' + n : n
    }

    /* 生日 */
    document.querySelector('#birthdayPicker').addEventListener('click', function () {
        weui.datePicker({
            start: new Date().getFullYear() - 100, //初始时间为当前时间(年)-100年
            end: new Date().getFullYear(),

            onConfirm: function (result) {
                //console.log(result);
                //console.log([result[0].value,result[1].value,result[2].value].join('-'));
                document.querySelector('#birthday').textContent = [result[0].value, fillZero(result[1].value), fillZero(result[2].value)].join('-')
            },
            title: '请选择你的出生年月日'
        });
    });

    
    /***/
    /* let firstCityPicker = null;
    document.querySelector('#proPicker').addEventListener('click', function () {
        //向服务器发请求拿到省份数据
        axios.get('http://139.9.177.51:8099/address/province').then(function (res) {
            //console.log(res.data);
            if (res.data.status === 0) {
                const provinceOptions = res.data.data.map(function (v) {
                    return {
                        //对数据进行处理
                        label: v.name,
                        value: v.addressId
                    }
                })
                //console.log(provinceOptions);
                weui.picker(provinceOptions, { //将数据渲染进weui里面
                    onConfirm: function (result) { //点击确定之后执行的函数
                        //console.log(result);
                        //改变省份的文本内容
                        document.querySelector('#pro').textContent = result[0].label
                        //将城市的文本内容改为未选择
                        document.querySelector('#city').textContent = '未选择'
                        //定义变量存放省份id
                        const provinceId = result[0].value
                        //定义变量存放拼接好的城市链接
                        const cityUrl = 'http://139.9.177.51:8099' + '/address/city/' + provinceId
                        //console.log(cityUrl);
                        //向后台发请求拿到对应省份的城市
                        axios.get(cityUrl).then(function (res) {
                            //console.log(res.data);
                            if (res.data.status === 0) {
                                const cityOptions = res.data.data.map(function (v) {
                                    return { //处理数据
                                        label: v.name,
                                        value: v.addressId
                                    }
                                })
                                //将城市数据渲染到weui页面的操作封装成函数方便后面复用
                                function cityPicker() {
                                    weui.picker(cityOptions, { //渲染数据
                                        onConfirm: function (result) {
                                            //console.log(result);
                                            //改变城市框的文本内容
                                            document.querySelector('#city').textContent = result[0].label
                                        },
                                        title: '请选择城市'
                                    })
                                }
                                
                                //移除城市框绑定的事件
                                document.querySelector('#cityPicker').removeEventListener('click', firstCityPicker)
                                //将封装好的函数赋值给空变量
                                firstCityPicker = cityPicker
                                //为城市框绑定事件
                                document.querySelector('#cityPicker').addEventListener('click', cityPicker)

                            }
                        })
                        //console.log(result);
                        //console.log(result[0].label);
                    },
                    title: '请选择省份'
                });
            }


        })
    }); */

    /* 省份 城市联动 */
    //页面加载时就像后台发送请求拿到省份数据
    let provinceOptions = [];//空数组存放省份选项
    let provinceId = null;//定义变量存放省份ID
    let cityOptions = [];//定义空数组存放城市选项
    axios.get('http://139.9.177.51:8099/address/province').then(function(res){
        //console.log(res.data);
        //对数据进行处理
        provinceOptions = res.data.data.map(function(item){
            return {label: item.name,value: item.addressId}
        })
        //console.log(provinceOptions);
    })
    document.querySelector('#proPicker').addEventListener('click',function(){
        weui.picker(provinceOptions,{
            onConfirm: function (result) {
                //console.log(result);
                //改变省份框的文本内容
                document.querySelector('#pro').textContent = result[0].label
                //获取到省份id
                provinceId = result[0].value
                //改变城市文本框的默认值
                document.querySelector('#city').textContent = '未选择'
                
            },
            title: '请选择省份'
        })
    })

    /* 城市 */
    document.querySelector('#cityPicker').addEventListener('click',function(){
        axios.get('http://139.9.177.51:8099/address/city/' + provinceId).then(function(res){
            //console.log(res.data);
            /* 处理数据 */
            cityOptions = res.data.data.map(function(item){
                return {label: item.name,value: item.addressId}
            })

            //console.log(cityOptions);
            weui.picker(cityOptions,{
                onConfirm: function (result) {
                    //console.log(result);
                    //改变城市框的文本内容
                    document.querySelector('#city').textContent = result[0].label
                },
                title: '请选择城市'
            })
        })
    })

    /* 保存修改信息 */
    document.querySelector('#saveBtn').addEventListener('click', function () {

        /* 先将要保存的数据整理出来 */
        let parmas = {
            imgurl: document.querySelector('#headerImg').src,
            nickname: document.querySelector('#nickname').value,
            gender: document.querySelector('#sex').textContent,
            birthday: document.querySelector('#birthday').textContent,
            address : [document.querySelector('#pro').textContent,document.querySelector('#city').textContent],
            sign: document.querySelector('#sign').value,
            userId: localStorage.userId
        }

        //console.log(parmas);
        //向后台发送请求
        axios.post('http://139.9.177.51:8099/users/userEdit',parmas).then(function(res){
            if(res.data.status === 0){
                weui.toast('修改成功',{
                    duration: 2000,//等待时间
                    callback:function(){//回调函数跳转页面
                        location.href = './myself.html'
                    }
                })
                location.href = './myself.html'
            }else{
                weui.alert('修改失败')
            }
        })

    })

    /* 数据回填 */
    //从后台拿数据
    axios.get("http://139.9.177.51:8099/users/accountinfo",{
        params:{
            userId:localStorage.userId
        }
    }).then(function(res){
        //console.log(res.data);
        /* 渲染数据 */
        //头像
        if(res.data.data.imgurl){
            document.querySelector("#headerImg").src = res.data.data.imgurl
        }
        //昵称
        document.querySelector("#nickname").value = res.data.data.nickname;
        //性别
        if(res.data.data.gender){
            document.querySelector("#sex").textContent = res.data.data.gender
        }
        //生日
        if(res.data.data.birthday){
            document.querySelector("#birthday").textContent = res.data.data.birthday.substr(0,10)
        }
        //省份
        if(res.data.data.address){
            document.querySelector("#pro").textContent = res.data.data.address.split(',')[0]
            document.querySelector("#city").textContent = res.data.data.address.split(',')[1]
        }
        //个人介绍
        if(res.data.data.sign){
            document.querySelector("#sign").value = res.data.data.sign;
            document.querySelector("#curNumber").textContent = res.data.data.sign.length;
        }
        
    })

    /* 个人介绍输入框字数更新 */
    document.querySelector("#sign").addEventListener('input',function(){
        //console.log(1);
        document.querySelector("#curNumber").textContent =  this.value.length;
    })

})